<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/3</title>
    <script src="index.js"></script>
    <script src="node_modules/_vue@2.5.17@vue/dist/vue.min.js"></script>
    <script src="node_modules/_mockjs@1.0.1-beta3@mockjs/dist/mock-min.js"></script>

</head>
<body>
   <div id="root" v-cloak>
       <input type="text" v-model="username">
       <h1 style="color:skyblue">{{username}}</h1>
       <a :href="baiduHost">{{baiduName}}</a>
       <h1 v-for="(item,key) in arr" @click="clickToDel(key)">{{item}}</h1>
       <h2 v-once>{{msg}}</h2>
       <div v-text="msg1"></div>
       <div v-html="msg1" v-if="isShow"></div>
       <div v-if="isLogin">已登录</div>
       <!--<div v-else="isLogin">请登录</div>-->
       <div v-if="!isLogin">请登录</div>
       <p v-for="item in data">{{item.id}}--{{item.username}}--{{item.gender}}--{{item.job}}</p>
   </div>
    <!--<ul class="box">
        <li v-for="(item,key) in arr" v-on:click="clickToDel(key)">{{item}}</li>
    </ul>-->
</body>
<script>
    // 指令  directive
    /*
    * 循环  v-for
    *
    * 绑定事件  v-on @
    *
    *绑定值 针对标签属性 v-bind [把数据模型上面的值绑定到节点的属性上面]  :
    *
    * 数据双向绑定   v-model  [two ways data binding]
    *
    * 绑定一次针对标签内容   v-once
    *
    * 绑定文本   v-text
    *
    * 绑定html   v-html
    *
    * 防止页面闪烁  v-cloak
    *
    *v-pre
    * */
    /*
    * el 被vue接管的dom结构区域    object 或者  string
    * data 数据模型    object  || function
    * methods 方法 一般绑定的时间都定义在里面   object
    * */
    var config = {
        // el: '.box',
        // el: document.getElementById('root'),
        el:'#root',
        data: {
            arr: [1,2,3,4],
            baiduHost: 'http://baidu.com',
            baiduName:'百度',
            username:'',
            msg: 'hello',
            msg1: '<div style="background: pink;height: 30px;"></div>',
            isShow:true,
            isLogin:true,
            data:Mock.mock({
            'data|10': [{
                'id|+1':1006,
                username: '@cname',
                gender: '@boolean',
                'job|1':['作家','歌手','词人', '码农']

            }]
          }).data,

            userData:{}

        },
        methods: {
            clickToDel: function(index) {
                   this.arr.splice(index,1);   //this指向data
            }
        },

        created(){
            $.ajax({
                url:'a.com',
                method:'get',
                data:{
                    count:10
                }
            })
                .then(function(data){
                    this.userData = data;
                })
                .catch(function(){

                })
        }
    };
    var app = new Vue(config);
</script>
</html>